<template>
  <div class="load1">
    <van-image
      class="loadPhoto"
      v-if="itemLoad.aut_photo"
      round
      width="1.5rem"
      height="1.5rem"
      fit="cover"
      :src="itemLoad.aut_photo"
    />
    <div class="loadInfo">
      <div class="loadUser">
        <span>{{ itemLoad.aut_name }}</span>
        <div>
          <van-icon
            name="good-job-o"
            @click="targetLike(itemLoad.com_id, itemLoad.is_liking)"
            :color="itemLoad.is_liking ? 'red' : ''"
          />{{ itemLoad.is_liking ? itemLoad.like_count : "赞" }}
        </div>
      </div>
      <div class="test">
        {{ itemLoad.content }}
      </div>
      <div class="bnm">
        <span>{{ itemLoad.pubdate | time }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['itemLoad'],
  data () {
    return {}
  },
  methods: {
    // 对评论点赞
    async targetLike (target, flag) {
      this.$emit('targetLike', target, flag)
      this.itemLoad.is_liking = !this.itemLoad.is_liking
      let num = parseInt(this.itemLoad.like_count)
      if (flag) {
        this.$set(this.itemLoad, 'like_count', --num)
      } else {
        this.$toast('点赞成功')
        this.$set(this.itemLoad, 'like_count', ++num)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.load1 {
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
}
.loadInfo {
  padding-top: 25px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-bottom: 20px;
  width: 570px;
  color: #000;
  font-size: 38px;
  .loadUser {
    display: flex;
    justify-content: space-between;
    padding-bottom: 20px;
    span {
      font-size: 42px;
      color: #666699;
    }
  }

  .test {
    font-size: 50px;
  }
  .bnm {
    padding-top: 20px;
    font-size: 30px;
    display: flex;
    align-items: center;
    .reply {
      margin-left: 20px;
      width: 134px;
    }
  }
}
</style>
